<template>
  <div>
    <el-form
      :label-position="labelPosition"
      label-width="120px"
      :model="personalInfo"
      :rules="rules"
      ref="personalInfo"
      class="demo-ruleForm"
    >
      <!-- 第一行 -->
      <el-row>
        <el-col :span="24">
          <h2>基本信息</h2>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="姓名">
              <el-input v-model="personalInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <!-- placeholder="男" disabled -->
              <el-select v-model="personalInfo.sex">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="民族" prop="national">
              <el-select v-model="personalInfo.national">
                <el-option label="汉" value="汉"></el-option>
                <el-option label="满" value="满"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="固定电话">
              <el-input v-model="personalInfo.telephone"></el-input>
            </el-form-item>
            <el-form-item label="最高学历" prop="educate">
              <el-select v-model="personalInfo.educate">
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="大专" value="大专"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="毕业时间">
              <!-- <el-date-picker type="date" v-model="personalInfo.graduation"></el-date-picker> -->
              <el-date-picker
                prop="graduation"
                v-model="personalInfo.graduation"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="证件类型">
              <el-input v-model="personalInfo.type"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="personalInfo.phone"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" prop="nativePlace">
              <el-select v-model="personalInfo.nativePlace">
                <el-option label="合肥" value="合肥"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="参加工作时间">
              <!-- <el-input v-model="personalInfo.worktime"></el-input> -->
              <el-date-picker
                prop="worktime"
                v-model="personalInfo.worktime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="毕业院校" prop="school">
              <el-input v-model="personalInfo.school"></el-input>
            </el-form-item>
            <el-form-item label="行政职务" prop="duty">
              <el-input v-model="personalInfo.duty"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="col_css">
            <el-form-item label="证件号码">
              <el-input v-model="personalInfo.certificate"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <!-- <el-date-picker type="date" placeholder="选择日期" v-model="personalInfo.birth"></el-date-picker> -->
              <el-date-picker
                prop="birth"
                v-model="personalInfo.birth"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="timestamp"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="电子邮箱">
              <el-date-picker type="email" v-model="personalInfo.email"></el-date-picker>
            </el-form-item>
            <el-form-item label="政治面貌" prop="political">
              <el-select v-model="personalInfo.political">
                <el-option label="党员" value="党员"></el-option>
                <el-option label="共青团员" value="共青团员"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所学专业" prop="major">
              <el-input v-model="personalInfo.major"></el-input>
            </el-form-item>
            <el-form-item label="行政级别">
              <el-input v-model="personalInfo.level"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="24">
          <h2>职称外语、计算机情况</h2>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col :span="8">
          <div class="edu_css">
            <el-form-item label="职称外语考试情况" label-width="220">
              <el-input v-model="personalInfo.foreignExam" style="width:200px"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class>
            <el-form-item label="职称计算机考试情况" label-width="220">
              <el-input v-model="personalInfo.computer" style="width:200px"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class></div>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row>
        <el-col :span="24">
          <h2>身份证复印件</h2>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row>
        <el-row>
          <el-col :span="6">
            <div class>
              <el-form-item prop="idcard_pos" style="width:320px; height:220px">
                <el-upload
                  class="avatar-uploader"
                  action="/api"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :multiple="false"
                  :headers="headers"
                  name="image"
                >
                  <img
                    v-if="imageUrl"
                    :src="imageUrl"
                    class="avatar"
                    style="width:220px; height:150px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class>
              <el-form-item prop="idcard_back" style="width:320px; height:220px">
                <el-upload
                  class="avatar-uploader"
                  action="/api"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload2"
                  :multiple="false"
                  :headers="headers"
                  name="image"
                >
                  <img
                    v-if="imageUrl2"
                    :src="imageUrl2"
                    class="avatar"
                    style="width:220px; height:150px"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
        </el-row>

        <el-col :span="12">
          <div class></div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light"></div>
        </el-col>
      </el-row>
      <!-- 第七行 -->
      <el-row>
        <el-col :span="24">
          <div>
            <el-button plain @click="saveOk('personalInfo')" class="btn_css">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 2,
      imageUrl: "",
      imageUrl2: "",
      headers: { token: sessionStorage.getItem("token") },

      labelPosition: "right",
      personalInfo: {
        name: "",
        sex: "",
        national: "",
        telephone: "",
        type: "",
        certificate: "",
        email: "",
        educate: "",
        level: "",
        graduation: "",
        phone: "",
        nativePlace: "",
        worktime: "",
        school: "",
        duty: "",
        birth: "",
        political: "",
        major: "",
        foreignExam: "",
        computer: "",
        idcard_pos: "",
        idcard_back: ""
      },
      rules: {
        name: [
          { required: true, message: "", trigger: "blur" }
          //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        national: [{ required: true, message: "请选择民族", trigger: "blur" }],
        educate: [
          { required: true, message: "请选择最高学历", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
        nativePlace: [
          { required: true, message: "请选择籍贯", trigger: "blur" }
        ],
        worktime: [
          { required: true, message: "请选择参加工作时间", trigger: "blur" }
        ],
        graduation: [
          { required: true, message: "请选择毕业时间", trigger: "blur" }
        ],
        school: [
          { required: true, message: "请输入毕业院校", trigger: "blur" }
        ],
        duty: [{ required: true, message: "请输入行政职务", trigger: "blur" }],
        birth: [{ required: true, message: "请选择出生日期", trigger: "blur" }],
        political: [
          { required: true, message: "请选择政治面貌", trigger: "blur" }
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }]
      }
    };
  },
  methods: {
    getCon() {
      this.$axios({
        url: "/personalbasic/find",
        params: {
          id: this.id
        }
      }).then(res => {
        // console.log(22222222,res);
        this.personalInfo = { ...res.data.data };
        // this.personalInfo.idcard_pos =
        // console.log(111, res);
      });
    },
    /* 保存 */
    saveOk(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          this.$axios({
            url: "/personalbasic/update",
            method: "post",
            data: {
              id: this.id,
              name: this.personalInfo.name,
              sex: this.personalInfo.sex,
              type: this.personalInfo.type,
              certificate: this.personalInfo.certificate,
              national: this.personalInfo.national,
              telephone: this.personalInfo.telephone,
              email: this.personalInfo.email,
              educate: this.personalInfo.educate,
              graduation: this.personalInfo.graduation,
              phone: this.personalInfo.phone,
              level: this.personalInfo.level,
              foreignExam: this.personalInfo.foreignExam,
              computer: this.personalInfo.computer,
              nativePlace: this.personalInfo.nativePlace,
              worktime: this.personalInfo.worktime,
              school: this.personalInfo.school,
              duty: this.personalInfo.duty,
              birth: this.personalInfo.birth,
              political: this.personalInfo.political,
              major: this.personalInfo.major
            }
          }).then(res => {
            console.log(222, res);
            this.$message.success('保存成功！');
            // this.getCon();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      //  = res.data;
      this.personalInfo.idcard_pos = res.data;
      sessionStorage.setItem('imgAddress1', res.data);
    },
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      // res.data;
      this.personalInfo.idcard_back = res.data;
      sessionStorage.setItem('imgAddress2', res.data);
      // console.log("image", res);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  },
  // mounted(){
  //   sessionStorage.setItem('activeIndex', 1)
  // }
  mounted() {
    this.getCon();
    sessionStorage.setItem("fName", "Process1");
  }
};
</script>
<style scoped lang="less">
h2 {
  margin: 10px 0;
}
.col_css {
  width: 340px;
}
.edu_css {
  padding-left: 15px;
}
.btn_css {
  background-color: #f5f7fa;
  border: 1px solid #eee;
  width: 150px;
  height: 40px;
  display: block;
  font-size: 14px;
  margin: 20px auto;
}
.el-row {
  // margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  //   padding: 10px 0;
  //   background-color: #f9fafc;
}

.avatar-uploader,
.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader,
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  //   border: 1px dashed #d9d9d9;
}
</style>
